import React from 'react';
import {Modal,Form,Input,Select } from 'antd';
import {connect} from 'dva';
const  FormItem=Form.Item;
const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 8 },
};


class AddResourceModalUI extends React.Component {
  state = {
    addModalVisible:false,
  };

  componentWillUpdate(nextProps,nextState) {
    //组件的props改变后触发此函数
    this.state.addModalVisible =true;
  }
  handleOk = () => {
      this.props.form.validateFieldsAndScroll((errors, values) => {
        if (errors) {

        } else {
          this.props.dispatch({
            type: 'resourceManager/addResource',
            payload:values
          });
          this.state.addModalVisible = false;
          this.props.form.resetFields();
          this.setState(this.state);
        }
      });
  };
  handleCancel = () => {
    this.state.addModalVisible = false;
    this.props.form.resetFields();
    this.setState(this.state);
  };

  handleSelectChange =(value)=>{
    if('dir'===value){
      this.props.form.setFieldsValue({
        urlOrPermission: '',
      });
    }
  };
  render() {
    return(

      <Modal title="添加资源" visible={this.state.addModalVisible} onOk={()=>{this.handleOk()}}
             onCancel={()=>{this.handleCancel()}} okText="确认" cancelText="取消" maskClosable={false}
      >
        <Form>
          <FormItem {...formItemLayout}  label="父资源" >
            {
              this.props.parentComp.text
            }
            {
              this.props.form.getFieldDecorator('parentId', {
                initialValue : this.props.parentComp.id,
                rules: [
                  {
                    required: true,
                  },
                ],
              })(<Input type="hidden"  placeholder="父资源ID" size="large"/>)
            }
          </FormItem>
          <FormItem {...formItemLayout}  label="资源名" >
            {
              this.props.form.getFieldDecorator('text', {
                rules: [
                  {
                    required: true,
                  },
                ],
              })(<Input  placeholder="资源名" size="large"/>)
            }
          </FormItem>
          <FormItem {...formItemLayout}  label="图标" >
            {
              this.props.form.getFieldDecorator('icon')(<Input  placeholder="图标" size="large"/>)
            }
          </FormItem>
          <FormItem {...formItemLayout}  label="资源类型" >
            {
              this.props.form.getFieldDecorator('menuType',{
                initialValue : 'dir'
              })(
                <Select onChange={this.handleSelectChange}>
                  <Select.Option value="dir">文件夹</Select.Option>
                  <Select.Option value="page">页面</Select.Option>
                  <Select.Option value="element">元素</Select.Option>
                </Select>
              )
            }
          </FormItem>
          <FormItem {...formItemLayout}  label="资源值"  >
            {
              this.props.form.getFieldDecorator('urlOrPermission')(<Input  placeholder="资源值" size="large" />)
            }
          </FormItem>

        </Form>

      </Modal>

    );
  }
}

export default connect()(Form.create()(AddResourceModalUI));
